<template>
  <el-dialog
    :visible="value"
    title="题目预览"
    width="46.9%"
    @close="onClose">
    <el-row>
      <el-col :span="6" class="questions-preview">【题型】：{{ questionType(topicInfo.questionType) }}</el-col>
      <el-col :span="6" class="questions-preview">【编号】：{{ topicInfo.id }}</el-col>
      <el-col :span="6" class="questions-preview">【难度】：{{ difficulty(topicInfo.difficulty) }}</el-col>
      <el-col :span="6" class="questions-preview">【标签】：{{ topicInfo.tags }}</el-col>
      <el-col :span="6" class="questions-preview">【学科】：{{ topicInfo.subjectName }}</el-col>
      <el-col :span="6" class="questions-preview">【目录】：{{ topicInfo.directoryName }}</el-col>
      <el-col :span="6" class="questions-preview">【方向】：{{ topicInfo.direction }}</el-col>
    </el-row>
    <hr>
    【题干】：
    <div style="color:blue;" v-html="topicInfo.question"></div>

    <div v-if="topicInfo.questionType==='1'">
      <div style="padding-bottom: 5px;">单选题 选项：（以下选中的选项为正确答案）</div>
      <div v-for="item in topicInfo.options" :key="item.id" style="padding: 8px 0;">
        <el-radio-group :value="item.isRight">
          <el-radio :label=1>{{ item.title }}</el-radio>
        </el-radio-group>
      </div>
      <hr>
    </div>
    <div v-else-if="topicInfo.questionType==='2'">
      <div style="padding-bottom: 5px;">多选题 选项：（以下选中的选项为正确答案）</div>
      <div v-for="item in topicInfo.options" :key="item.id" style="padding: 8px 0;">
        <el-checkbox :value="!!item.isRight">{{ item.title }}</el-checkbox>
      </div>
      <hr>
    </div>
    【参考答案】：
    <el-button size="small" type="danger" @click="clickVideo">视频答案预览</el-button>
    <div v-show="showVideo" class="video">
      <video ref="video" :src="topicInfo.videoURL" controls="controls"></video>
    </div>
    <hr>
    【答案解析】：
    <div style="display: inline-block;" v-html="topicInfo.answer"></div>
    <hr>
    【题目备注】：
    {{ topicInfo.remarks }}
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="onClose">关 闭</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    topicInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      showVideo: false
    }
  },
  computed: {},
  beforeDestroy () {
    this.$emit('destroy')
  },
  methods: {
    isRight (val) {
      return val === 1
    },
    onClose () {
      this.$emit('input', false)
    },
    questionType (val) {
      if (val === '1') {
        return '单选题'
      } else if (val === '2') {
        return '多选题'
      } else if (val === '3') {
        return '简答题'
      } else {
        return ''
      }
    },
    difficulty (val) {
      if (val === '1') {
        return '简单'
      } else if (val === '2') {
        return '一般'
      } else if (val === '3') {
        return '困难'
      } else {
        return ''
      }
    },
    // 点击播放视频
    clickVideo () {
      this.showVideo = true
      this.$refs.video.play()
    }
  }
}
</script>

<style lang='less' scoped>
.questions-preview {
  padding: 10px 0;
}

.video {
  width: 400px;
  height: 300px;

  video {
    width: 100%;
    height: 100%;
  }
}
</style>
